@charset "UTF-8";

$base-font-size: 14px;

@function parse-int($n) { @return $n / ($n * 0 + 1); }

/* @em(...) {{{ */
// list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function)
@function em-separator($list) {
  @if function-exists("list-separator") == true {
    @return list-separator($list);
  }

  $test-list: ();
  @each $item in $list {
    $test-list: append($test-list, $item, space);
  }

  @return if($test-list == $list, space, comma);
}
@function em($values...) {
  $context: nth($values, length($values));
  $result: ();
  $separator: em-separator($values);

  @for $i from 1 through length($values) - 1 {
    $value: nth($values, $i);
    @if type-of($value) == "number" and unit($value) == "px" {
      $result: append($result, $value / $context * 1em, $separator);
    } @else if type-of($value) == "list" {
      $result: append($result, em(append($value, $context)...), $separator);
    } @else {
      $result: append($result, $value, $separator);
    }
  }

  @return if(length($result) == 1, nth($result, 1), $result);
}
@mixin em($properties, $context) {
  @each $property in map-keys($properties) {
    #{$property}: em(append(map-get($properties, $property), $context)...);
  }
}
/* }}} */

/* ui-box-iconf iconfont for ui-box-x */
@font-face {
  font-family: 'ui-box-iconf';
  src: url('//at.alicdn.com/t/font_1452136965_3977907.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/font_1452136965_3977907.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/font_1452136965_3977907.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/font_1452136965_3977907.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/font_1452136965_3977907.svg#ui-box-iconf') format('svg'); /* iOS 4.1- */
}

.ui-box-iconf {
  font-family: ui-box-iconf;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* common animations {{{1 */
  .ui-animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both; }
  .ui-speed-normal,.ui-speed-500 {
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
  }
  .ui-speed-fast,.ui-speed-200 {
    -webkit-animation-duration: 0.2s;
    -moz-animation-duration: 0.2s;
    -o-animation-duration: 0.2s;
    animation-duration: 0.2s;
  }
  .ui-speed-slow,.ui-speed-1000 {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
  }

/* ui-ani-bounceIn {{{1 */
  @-webkit-keyframes bounceIn {
    0% { -webkit-transform: scale(.5); opacity: 0; }
    70% { -webkit-transform: scale(1.03); }
    100% { -webkit-transform: scale(1); } }
  @-moz-keyframes bounceIn {
    0% { -moz-transform: scale(.5); opacity: 0; }
    70% { -moz-transform: scale(1.03); }
    100% { -moz-transform: scale(1); } }
  @-o-keyframes bounceIn {
    0% { -o-transform: scale(.5); opacity: 0; }
    70% { -o-transform: scale(1.03); }
    100% { -o-transform: scale(1); } }
  @keyframes bounceIn {
    0% { transform: scale(.5); opacity: 0; }
    70% { transform: scale(1.03); }
    100% { transform: scale(1); } }
  .ui-ani-bounceIn {
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn; }

/* ui-ani-bounceOut {{{1 */
  @-webkit-keyframes bounceOut {
    100% { -webkit-transform: scale(.7); opacity: 0; }
    30% { -webkit-transform: scale(1.03); }
    0% { -webkit-transform: scale(1); } }
  @-moz-keyframes bounceOut {
    100% { -moz-transform: scale(.7); opacity: 0; }
    30% { -moz-transform: scale(1.03); }
    0% { -moz-transform: scale(1); } }
  @-o-keyframes bounceOut {
    100% { -o-transform: scale(.7); opacity: 0; }
    30% { -o-transform: scale(1.03); }
    0% { -o-transform: scale(1); } }
  @keyframes bounceOut {
    100% { transform: scale(.7); opacity: 0; }
    30% { transform: scale(1.03); }
    0% { transform: scale(1); } }
  .ui-ani-bounceOut {
    -webkit-animation-name: bounceOut;
    -moz-animation-name: bounceOut;
    -o-animation-name: bounceOut;
    animation-name: bounceOut; }

/* ui-ani-shake {{{1 */
  @-webkit-keyframes shake {
    0%,100% { -webkit-transform: translateX(0); }
    10%,30%,50%,70%,90% { -webkit-transform: translateX(-10px); }
    20%,40%,60%,80% { -webkit-transform: translateX(10px); } }
  @-moz-keyframes shake {
    0%,100% { -moz-transform: translateX(0); }
    10%,30%,50%,70%,90% { -moz-transform: translateX(-10px); }
    20%,40%,60%,80% { -moz-transform: translateX(10px); } }
  @-o-keyframes shake {
    0%,100% { -o-transform: translateX(0); }
    10%,30%,50%,70%,90% { -o-transform: translateX(-10px); }
    20%,40%,60%,80% { -o-transform: translateX(10px); } }
  @keyframes shake {
    0%,100% { transform: translateX(0); }
    10%,30%,50%,70%,90% { transform: translateX(-10px); }
    20%,40%,60%,80% { transform: translateX(10px); } }
  .ui-ani-shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -o-animation-name: shake;
    animation-name: shake; }

/* ui-ani-fadeIn {{{1 */
  @-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; } }
  @-moz-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; } }
  @-o-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; } }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; } }
  .ui-ani-fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn; }

/* ui-ani-fadeOut {{{1 */
  @-webkit-keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; } }
  @-moz-keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; } }
  @-o-keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; } }
  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; } }
  .ui-ani-fadeOut {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -o-animation-name: fadeOut;
    animation-name: fadeOut; }

/* ui-ani-fadeInUp {{{1 */
  @-webkit-keyframes fadeInUp {
    from { opacity: 0; -webkit-transform: translateY(100%); }
    to { opacity: 1; -webkit-transform: none; } }
  @-moz-keyframes fadeInUp {
    from { opacity: 0; -moz-transform: translateY(100%); }
    to { opacity: 1; -moz-transform: none; } }
  @-o-keyframes fadeInUp {
    from { opacity: 0; -o-transform: translateY(100%); }
    to { opacity: 1; -o-transform: none; } }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: none; } }
  .ui-ani-fadeInUp {
    -webkit-animation-name: fadeInUp;
    -ms-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp; }

/* ui-ani-rotate {{{1 */
  @-webkit-keyframes ui-ani-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } }
  @keyframes ui-ani-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); } }
/* }}} */

/** box layout */
.ui-box {
  position: relative;
  background-color: #FFF;
  border: 1px solid #e4e4e4;
  border: 1px solid rgba(204, 204, 204, 0.5);
  border-radius: 2px;
  outline: 0;
  background-clip: padding-box;
  font: 400 14px/1.428 'Arial','Microsoft YaHei';
  color: #333;
  -webkit-box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
}

[data-dpr] .ui-box {
  font-size: #{parse-int($base-font-size)/12}em;
}

.ui-layer-focus .ui-box {
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.ui-layer-modal .ui-box {
  border: 0;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.ui-box-hd, .ui-box-bd, .ui-box-ft {
  padding: 0;
  border: 0;
  text-align: left;
  background: transparent;
}

.ui-box-hd:after, .ui-box-bd:after, .ui-box-ft:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.ui-box-hd {
  white-space: nowrap;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
  border-radius: 2px 2px 0 0;
  margin-bottom: em(-4px, $base-font-size);
  .ui-box-title {
    $font-size: 14px;
    font-size: em($font-size, $base-font-size);
    min-height: em(16px, $font-size);
    padding: em(8px 18px, $font-size);
    line-height: 1.3;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
    color: #666;
  }
}

.ui-box-bd {
  padding: em(18px, $base-font-size);
  text-align: center;
  border-radius: 2px;
  overflow: hidden;
}

.ui-box-close {
  $font-size: 15px;
  position: absolute;
  top: em(9px, $font-size);
  right: em(6px, $font-size);
  z-index: 1;
  padding: em(2px, $font-size);
  font-size: em($font-size, $base-font-size);
  font-weight: bold;
  text-shadow: 0 1px 0 #fff;
  cursor: pointer;
  font-family: "ui-box-iconf",monospace,'Microsoft YaHei';
  line-height: 1em;
  color: #ddd;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
  &:hover, &:focus {
    text-decoration: none;
    cursor: pointer;
    outline: 0;
    color: #afafaf;
  }
}

.ui-box-content {
  position: relative;
  *zoom: 1;
  *display: inline;
  text-align: left;
  white-space: normal;
  &, > img {
    vertical-align: middle;
  }
}

.ui-box-ft {
  padding: em(12px 18px 16px, $base-font-size);
  margin-top: em(-12px, $base-font-size);
  $btn-font-size: 14px;
  button {
    margin: em(0 8px, $btn-font-size);
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline: 0;
    cursor: pointer;
    text-align: center;
  }
  .ui-box-btn {
    overflow: visible;
    margin-bottom: 0;
    white-space: nowrap;
    vertical-align: middle;
    background-image: none;
    border-radius: 2px;
    height: em(30px, $btn-font-size);
    font: 600 #{em($btn-font-size, $base-font-size)}/#{em(28px, $btn-font-size)} 'Microsoft YaHei','Arial';
    color: #7d7d7d;
    padding: em(0 15px, $btn-font-size);
    border: 1px solid #d9d9d9;
    background-color: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    &:active {
      -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
      box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    }
    &:hover, &:focus, &:active {
      background-color: #f0f0f0;
      border-color: #ccc;
    }
    &[disabled] {
      pointer-events: none;
      cursor: not-allowed;
      opacity: 0.65;
      filter: alpha(opacity = 65);
      -webkit-box-shadow: none;
      box-shadow: none;

      background-color: #fff;
      border-color: #ccc;
      &:hover, &:focus, &:active {
        background-color: #fff;
        border-color: #ccc;
      }
    }
    &.autofocus {
      box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
      color: #fff;
      background-color: #f03468;
      border-color: #f03468;
      &:hover, &:focus, &:active {
        background-color: #fa4678;
        border-color: #fa4678;
      }
    }
  }
}

.ui-box-func {
  text-align: center;
  white-space: nowrap;
}

.ui-arrow {
  position: absolute;
  line-height: 0;
  overflow: hidden;
  display: block;
}

.ui-arrow i, .ui-arrow b {
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 8px;
  border-style: solid;
  border-color: transparent;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  vertical-align: top;
  _color: #ff3fff;
  _filter: chroma(color=#ff3fff);
}

.ui-layer-t {
  .ui-arrow {
    bottom: -16px;
    left: 20px;
    i {
      border-top-color: #e4e4e4;
      border-top-color: rgba(204, 204, 204, 0.5);
    }
    b {
      border-top-color: #fff;
      margin: -1px 0 0 -16px;
    }
  }
}

.ui-layer-b {
  .ui-arrow {
    top: -16px;
    left: 20px;
    i {
      border-bottom-color: #e4e4e4;
      border-bottom-color: rgba(204, 204, 204, 0.5);
    }
    b {
      border-bottom-color: #fff;
      margin: 1px 0 0 -16px;
    }
  }
}

.ui-layer-l {
  .ui-arrow {
    right: -16px;
    top: 20px;
    i {
      border-left-color: #e4e4e4;
      border-left-color: rgba(204, 204, 204, 0.5);
    }
    b {
      border-left-color: #fff;
      margin-left: -17px;
    }
  }
}

.ui-layer-r {
  .ui-arrow {
    left: -16px;
    top: 20px;
    i {
      border-right-color: #e4e4e4;
      border-right-color: rgba(204, 204, 204, 0.5);
    }
    b {
      border-right-color: #fff;
      margin-left: -15px;
    }
  }
}

.ui-box-loading {
  vertical-align: middle;
  position: relative;
  display: block;
   *zoom: 1;
   *display: inline;
   overflow: hidden;
   width: 32px;
   height: 32px;
   top: 50%;
   margin: -16px auto 0 auto;
   font-size: 0;
   text-indent: -999em;
   color: #666;
   width: 100% \9;
   text-indent: 0\9;
   line-height: 32px\9;
   text-align: center\9;
   font-size: 12px\9;
   &::after {
     position: absolute;
     content: '';
     width: 3px;
     height: 3px;
     margin: em(14px 0 0 14px, $base-font-size);
     border-radius: 100%;
     box-shadow: 0 -10px 0 1px #ccc, 10px 0px #ccc, 0 10px #ccc, -10px 0 #ccc, -7px -7px 0 0.5px #ccc, 7px -7px 0 1.5px #ccc, 7px 7px #ccc, -7px 7px #ccc;
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
     -webkit-animation: ui-ani-rotate 1.5s infinite linear;
     animation: ui-ani-rotate 1.5s infinite linear;
     display: none\9;
  }
}

/* Extends box with built-in ui-box-x icon styles */
.ui-box-x-wrap {
  $icon-size: 18px;
  $icon-space: $icon-size + 4;
  overflow: hidden;
  padding-left: em($icon-space, $base-font-size);
  .x-icon {
    text-align: center;
    float: left;
    width: 1em;
    height: 1em;
    font-size: em($icon-size, $base-font-size);
    margin-left: em(-1 * $icon-space, $icon-size);
    line-height: 1;
    color: #69a0d3;
  }
  .x-text {
    padding-left: em(5px, $base-font-size);
  }
}

.ui-bubble {
  .ui-box { @include em((max-width: 990px), $base-font-size); }
  .ui-box-bd { padding: em(8px, $base-font-size); }
  .ui-box-x-wrap .x-text {
    margin-right: em(7px, $base-font-size); /* marigin for close icon */
  }
  .ui-box-close {
    $font-size: 10px;
    font-size: em($font-size, $base-font-size);
    top: em(13px, $font-size);
    right: em(2px, $font-size);
  }
}
.ui-box-x-ok .x-icon { color: #55c788; }
.ui-box-x-warn .x-icon { color: #edaa08; }
.ui-box-x-error .x-icon { color: #f03468; }
.ui-box-x-confirm, .ui-box-alert {
  @include em((min-width: 268px, max-width: 460px), $base-font-size);
}

$loading-outer-space: 6px 8px;
.ui-box-x-loading {
  color: #666;
  .ui-box-x-wrap { margin: 0; }
  .ui-box-bd { padding: em($loading-outer-space, $base-font-size); }
  .x-icon {
    $font-size: 18px;
    img {
      @include em((width: 18px, height: 18px), $font-size);
    }
  }
  .x-text { color: #797979; }
}

.ui-box-iframe {
  .iframe { width: 100%; height: 100%; border: 0; display: block; }
  .ui-box-bd { padding: 0; }
  .ui-box-hd, .ui-box-ft { margin: 0; }
  .ui-box-content { overflow: hidden; }
  .ui-box-x-loading { margin: em($loading-outer-space, $base-font-size); }
}

/* vim: set fdm=marker ts=2 sw=2 sts=2 tw=85 et :*/
